<template>
  <div class="container">
    <div class="header">
      <div class="title">水上桥区管控 - 中山先行示范区</div>
      <div class="menu">
        <div class="item" @click="router.push({ path: '/szsyBridgeIndex' })">总体概况</div>
        <div class="item" @click="router.push({ path: '/szsyBridgeManage' })">桥区日常管理</div>
      </div>
    </div>
    <div class="main">
      <div class="left-content">
        <div class="title">桥梁基本信息</div>
        <div class="subtitle">
          <div class="name">桥梁图片</div>
        </div>
        <div class="image">
          <img :src="picUrl" v-if="picUrl" @error="imgError">
          <div class="no-image" v-else>
            <img src="../../assets/images/pc/error.png">
            <div class="name">暂无图片</div>      
          </div> 
          <div 
            class="btn"
            v-if="haveLink"
            @click="goLink"
          >
            三维
          </div>
        </div>        
        <div class="subtitle">
          <div class="name">基本信息</div>
        </div>
        <div class="info">
          <div class="info-item">
            <div class="name">桥梁名称</div>
            <div class="value">{{ bridgeBaseInfoData?.bridgeName || "--" }}</div>
          </div>
          <div class="info-item">
            <div class="name">桥梁类型</div>
            <div class="value">{{ bridgeBaseInfoData?.cBridgelx || "--" }}</div>
          </div>
          <div class="info-item">
            <div class="name">建设单位</div>
            <div class="value">{{ bridgeBaseInfoData?.cBridgegldw || "--" }}</div>
          </div>
          <div class="info-item">
            <div class="name">地理位置</div>
            <div class="value">{{ bridgeBaseInfoData?.cAddress || "--" }}</div>
          </div>
          <div class="info-item">
            <div class="name">所属航道</div>
            <div class="value">{{ bridgeBaseInfoData?.cHangdao || "--" }}</div>
          </div>
          <div class="info-item">
            <div class="name">所在航道等级</div>
            <div class="value">{{ bridgeBaseInfoData?.hangdaoLevel || "--" }}</div>
          </div>
        </div>
        <div class="subtitle">
          <div class="name">桥梁画像</div>
        </div>
        <div class="portrait">
          <div class="portrait-item br1">
            <img src="../../assets/images/pc/dabiao-icon.png" v-if="wide === '是'">
            <img src="../../assets/images/pc/budabiao-icon.png" v-else>
            <div class="name">通航净宽</div>
          </div>
          <div class="portrait-item br1">
            <img src="../../assets/images/pc/dabiao-icon.png" v-if="high === '是'">
            <img src="../../assets/images/pc/budabiao-icon.png" v-else>
            <div class="name">通航净高</div>
          </div>
          <div class="portrait-item">
            <img src="../../assets/images/pc/dabiao-icon.png" v-if="shebiao === '是'">
            <img src="../../assets/images/pc/budabiao-icon.png" v-else>
            <div class="name">设标情况</div>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <OlArc ref="OlArcRef"></OlArc>
        <div class="choose">
          <el-select
            v-model="bridge"
            filterable
            placeholder="请选择"   
            @change="bridgeChange"
            style="width: 200px;"               
          >
            <el-option
              v-for="item in bridgeOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select> 
        </div>
        <div class="legend">          
          <div class="legend-item">
            <img src="../../assets/images/big-screen/jg-budabiao.png" alt="">
            <div>净高不达标桥梁</div>
          </div>  
          <div class="legend-item">
            <img src="../../assets/images/big-screen/jg-dabiao.png" alt="">
            <div>净高达标桥梁</div>
          </div>    
        </div>
        <div class="count">
          <div class="count-item" style="margin-right: 10px;">
            <div class="name">航道里程数(公里)</div>
            <div class="value">{{ baseInfoData.hdMile }}</div>
          </div>
          <div class="count-item">
            <div class="name">桥梁总数(座)</div>
            <div class="value">{{ baseInfoData.bgNum }}</div>
          </div>
        </div>
        <div class="filter">
          <div class="filter-title" @click="isShowFilter = !isShowFilter">
            <div>筛选</div>
            <img src="../../assets/images/big-screen/icon-shouqi.png" v-if="!isShowFilter">
            <img src="../../assets/images/big-screen/icon-zhankai.png" v-else>
          </div>
          <div v-show="isShowFilter">
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll1"
                :indeterminate="isIndeterminate1"
                @change="handleCheckAllChange1"                
              >
                内河高等级航道
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues1"
                @change="handleCheckedChange1" 
                style="display: flex;flex-direction: column;margin-left: 20px;"               
              >
                <el-checkbox
                  v-for="item in options1"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll2"
                :indeterminate="isIndeterminate2"
                @change="handleCheckAllChange2"
              >
                内河4-7等级航道
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues2"
                @change="handleCheckedChange2"
                style="display: flex;flex-direction: column;margin-left: 20px;"
              >
                <el-checkbox
                  v-for="item in options2"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="nhdwhd"   
                @change="handleSure"           
              >
                内河等外航道
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll3"
                :indeterminate="isIndeterminate3"
                @change="handleCheckAllChange3"
              >
                通航净高达标情况
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues3"
                @change="handleCheckedChange3"
                style="display: flex;flex-direction: column;margin-left: 20px;"
              >
                <el-checkbox
                  v-for="item in options3"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll4"
                :indeterminate="isIndeterminate4"
                @change="handleCheckAllChange4"
              >
                事故桥梁
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues4"
                @change="handleCheckedChange4"
                style="display: flex;flex-direction: column;margin-left: 20px;"
              >
                <el-checkbox
                  v-for="item in options4"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="title">航保信息</div>
        <div class="first-part">
          <div class="subtitle">
            <div class="name">通航孔</div>
          </div>
          <div class="hole-info">
            <div class="hole-item">
              <div class="name">单向/双向通行</div>
              <div class="value" v-if="tonghangkong.length">
                {{ tonghangkong[0]?.tonghangkGz || "--" }}/{{ tonghangkong[1]?.tonghangkGz || "--" }}
              </div>
              <div class="value" v-else>--/--</div>
            </div>
            <div class="hole-item">
              <div class="name">通航孔数量</div>
              <div class="value">{{ bridgeHoleData.tonghangnum || "--" }}个</div>
            </div>
            <div class="hole-item">
              <div class="name">设计最高通航水位</div>
              <div class="value">{{ bridgeHoleData.shejizuigao || "--" }}m</div>
            </div>
            <div class="hole-item">
              <div class="name">实时通航净高</div>
              <div class="value">{{ bridgeHoleData.shicetongh || "--" }}m</div>
            </div>
          </div>
          <div class="subtitle">
            <div class="name">预警情况</div>
          </div>
          <div class="warning">
            <div class="warning-item br1">              
              <div class="name">超高统计</div>
              <div class="value">{{ yawStatisticsData.chaogaoAlarm }}</div>
            </div>
            <div class="warning-item br1">              
              <div class="name">超速统计</div>
              <div class="value">{{ yawStatisticsData.chaosuAlarm }}</div>
            </div>
            <div class="warning-item">              
              <div class="name">设标情况</div>
              <div class="value">{{ yawStatisticsData.pianhangAlarm }}</div>
            </div>
          </div>
          <div class="subtitle">
            <div style="display: flex;">
              <div 
                class="name" 
                :class="currentType === '水位情况'?'active':''" 
                @click="changeType('水位情况')"
              >
                水位情况
              </div>
              <div 
                class="name" 
                :class="currentType === '风速情况'?'active':''" 
                @click="changeType('风速情况')"
              >
                风速情况
              </div>
              <div 
                class="name" 
                :class="currentType === '能见度情况'?'active':''" 
                @click="changeType('能见度情况')"
              >
                能见度情况
              </div>
            </div>            
            <el-select
              v-model="water"
              placeholder="请选择"  
              size="small" 
              @change="waterChange"   
              v-show="currentType === '水位情况'"
              style="width: 200px;"     
            >
              <el-option
                v-for="item in waterOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </div>
          <div class="water-situation">
            <div v-show="currentType === '水位情况'">
              <div class="radio-group">
                <el-radio-group v-model="waterRadio">
                  <el-radio-button label="实时水位" value="实时水位" />
                  <el-radio-button label="当日水位监测" value="当日水位监测" />
                  <el-radio-button label="每日八时水位情况" value="每日八时水位情况" />                                          
                </el-radio-group> 
              </div>
              <div v-show="waterRadio === '实时水位'">
                <div class="count">
                  <div class="item">
                    <div class="name">实时水位：</div>
                    <div class="value"> {{ bgWaterSitData?.swz || "--" }}米</div>
                  </div>
                  <div class="item">
                    <div class="update-time">更新时间: {{ bgWaterSitData?.time || "--" }}</div>
                  </div>
                </div>
                <div class="info">
                  <div class="info-item" style="border-right: 1px solid #D9D9D9;">
                    <div class="value">
                      <img src="../../assets/images/pc/high-water-icon.png" alt="">
                      <div>{{ theHighLowData[0]?.swz?.toFixed(1) || "--" }}米</div>
                    </div>
                    <div class="name">历史最高水位</div>
                    <div class="time">
                      <img src="../../assets/images/pc/time-icon.png" alt="">
                      <div>时间：{{ theHighLowData[0]?.time || "--" }}</div>
                    </div>
                    <div class="tips">(由{{ theHighLowData[0]?.time || "--" }}至今)</div>
                  </div>
                  <div class="info-item">
                    <div class="value">
                      <img src="../../assets/images/pc/low-water-icon.png" alt="">
                      <div>{{ theHighLowData[1]?.swz?.toFixed(1) || "--" }}米</div>
                    </div>
                    <div class="name">历史最低水位</div>
                    <div class="time">
                      <img src="../../assets/images/pc/time-icon.png" alt="">
                      <div>时间：{{ theHighLowData[1]?.time || "--" }}</div>
                    </div>
                    <div class="tips">(由{{ theHighLowData[1]?.time || "--" }}至今)</div>
                  </div>
                </div>
              </div>
              <div v-show="waterRadio === '当日水位监测'">
                <div id="water-chart1" style="height: 300px;width: 582px;"></div>
              </div>
              <div v-show="waterRadio === '每日八时水位情况'">
                <div id="water-chart2" style="height: 300px;width: 582px;"></div>
              </div>
            </div>
            <div id="lineChart1" style="width: 582px;height: 350px;" v-show="currentType === '风速情况'"></div>
            <div id="lineChart2" style="width: 582px;height: 350px;" v-show="currentType === '能见度情况'"></div>
          </div>          
        </div>
        <div class="title">通航情况</div>        
        <div class="shipping">
          <div class="subtitle">
            <div class="name">通航情况</div>
            <el-select
              v-model="count"
              placeholder="请选择"   
              size="small"
              @change="shipllAnalysFn" 
              style="width: 200px;"             
            >
              <el-option
                v-for="item in countOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="radio-group">
            <el-radio-group v-model="radio" @change="shipllAnalysFn">
              <el-radio-button label="日" value="日" />
              <el-radio-button label="周" value="周" />   
              <el-radio-button label="月" value="月" />
              <el-radio-button label="年" value="年" />                                            
            </el-radio-group> 
          </div>
          <div id="first-chart" style="height: 500px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();

  //引入Echarts
  import * as echarts from 'echarts/core';
  import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent } from 'echarts/components';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

  //引入接口
  import {
    bgList, //获取桥梁
    getBgPic, //桥梁图片
    bridgeBaseInfo, //基本信息
    bridgePortraitZhongshan, //桥梁画像
    baseInfo, //航道里程及桥梁总数
    bridgeWaterwayRisk, //通航孔
    yawStatistics, //预警情况
    //水位情况
    getBridgeList,
    bgWaterSit,
    theHighLow,
    recentOneDay,
    bgRecentWater,
    windSpeed, //风速情况
    nengjiandu, //能见度情况
    //通航情况
    shipllAnalys,
    shipllAnalysWeek,
    shipllAnalysMonth,
    shipllAnalysYear,

    bgModel, //获取桥梁全景
  } from "@/bridge-h5/utils/bridgeAreaControlApi";

  //地图
  import OlArc from "./olArcZhongshan.vue";
  const OlArcRef = ref(null); 

  //获取桥梁
  const bridge = ref('中山港大桥');
  const bridgeOptions = ref([]);
  const bgListFn = () => {
    bgList().then((res) => {
      if(res.code === 200){
        bridgeOptions.value = res.data;   
        getBgPicFn();
        bridgeBaseInfoFn();
        bridgePortraitZhongshanFn();
        bridgeWaterwayRiskFn();
        yawStatisticsFn();
        getWaterOptionsFn();
        windSpeedFn();
        nengjianduFn();
        shipllAnalysFn();
        bgModelFn();
      }
    }); 
  };
  const bridgeChange = () => {
    getBgPicFn();
    bridgeBaseInfoFn();
    bridgePortraitZhongshanFn();
    bridgeWaterwayRiskFn();
    yawStatisticsFn();
    getWaterOptionsFn();
    windSpeedFn();
    nengjianduFn();
    shipllAnalysFn();
    bgModelFn();
  };
  //桥梁图片
  const picUrl = ref("");
  const getBgPicFn = () => {
    getBgPic({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.picUrl){
        picUrl.value = `${import.meta.env.VITE_APP_BASE_API}attach` + res.data.picUrl;
      }else{
        picUrl.value = "";
      }
    });
  };
  const imgError = () => {
    picUrl.value = "";
  };
  //基本信息
  const bridgeBaseInfoData = ref({});
  const bridgeBaseInfoFn = () => {
    bridgeBaseInfo({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bridgeBaseInfoData.value = res.data[0];
      }
    });
  };
  //桥梁画像
  const high = ref("");
  const shebiao = ref("");
  const wide = ref("");
  const bridgePortraitZhongshanFn = () => {
    bridgePortraitZhongshan({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        high.value = res.data.high;
        shebiao.value = res.data.shebiao;
        wide.value = res.data.wide;
      }
    });
  };
  //航道里程及桥梁总数
  const baseInfoData = ref({});
  const baseInfoFn = () => {
    baseInfo().then((res) => {
      if(res.code === 200){
        baseInfoData.value = res.data;
      } 
    });
  };
  //通航孔
  const bridgeHoleData = ref({});
  const tonghangkong = ref([]);
  const bridgeWaterwayRiskFn = () => {
    bridgeWaterwayRisk({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bridgeHoleData.value = res.data;
        tonghangkong.value = res.data.tonghangkong;
      }
    });
  };
  //预警情况
  const yawStatisticsData = ref({});
  const yawStatisticsFn = () => {
    yawStatistics({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        yawStatisticsData.value = res.data.total_num[0];        
      }
    });
  };
  //水位情况
  const water = ref("");
  const waterOptions = ref([]);
  const getWaterOptionsFn = () => {
    getBridgeList({
      keyword: bridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        water.value = res.data[0].name;
        waterOptions.value = res.data;
        bgWaterSitFn();
        theHighLowFn();
        recentOneDayFn();
        bgRecentWaterFn();
      }
    });
  };
  const waterChange = () => {
    bgWaterSitFn();
    theHighLowFn();
    recentOneDayFn();
    bgRecentWaterFn();
  };
  const waterRadio = ref("实时水位");
  const bgWaterSitData = ref({});
  const bgWaterSitFn = () => {
    bgWaterSit({
      bridge: water.value
    }).then((res) => {
      if(res.code === 200){
        bgWaterSitData.value = res.data[0];
      }
    });
  };
  const theHighLowData = ref([]);
  const theHighLowFn = () => {
    theHighLow({ bridge: water.value }).then((res) => {
      if (res.code === 200) {
        theHighLowData.value = res.data;
      }
    });
  };
  const recentOneDayFn = () => {
    recentOneDay({ 
      bridge: water.value 
    }).then((res) => {
      if (res.code === 200){
        initWaterChart1(res.data);
      }
    });
  };  
  const bgRecentWaterFn = () => {
    bgRecentWater({ 
      bridge: water.value 
    }).then((res) => {
      if (res.code === 200){
        initWaterChart2(res.data);
      }
    });
  };
  const initWaterChart1 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.time.slice(11, 16));
        seriesData.push(item.swz);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("water-chart1"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('water-chart1'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          grid: {
            top: '40px',
            left: '45px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',           
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '水位（m）',
            splitLine: {
              show: true,
            } 
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              itemStyle: {
                color: '#0051FF'
              },
            }
          ]
        };
      }
      option && lineChart.setOption(option);
    }); 
  };
  const initWaterChart2 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.time);
        seriesData.push(item.swz);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("water-chart2"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('water-chart2'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          grid: {
            top: '40px',
            left: '45px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',           
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '水位（m）',
            splitLine: {
              show: true,
            } 
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              itemStyle: {
                color: '#0051FF'
              },
            }
          ]
        };
      }
      option && lineChart.setOption(option);
    }); 
  };
  const currentType = ref("水位情况");
  const changeType = (val) => {
    currentType.value = val;
  };
  //风速情况
  const windSpeedFn = () => {
    windSpeed({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200) {
        let xAxisData = [];
        let seriesData = [];
        res.data.forEach((item) => {
          xAxisData.push(item.sj);
          seriesData.push(item.avgWindSpeed);
        });
        initLineChart1(xAxisData,seriesData);
      }
    });
  };
  const initLineChart1 = (xAxisData,seriesData) => {
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart1"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("lineChart1"));

    let option;
    if(xAxisData.length === 0){
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal"
          }
        }
      };
    }else{
      option = {
        tooltip: {
          trigger: "axis",
          confine: true, //限制在图表区域内
        },
        grid: {
          top: "40px",
          left: "50px",
          right: "30px",
          bottom: "45px",
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            startValue: 0,
            endValue: 10,
            zoomLock: false,
          },
        ],
        xAxis: {
          type: "category",
          data: xAxisData,
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "10px",
            color: "rgba(0,0,0,0.45)",
          },
          axisLabel: {
            interval: 0,
            rotate: -30, //倾斜的程度
          },
        },
        yAxis: {
          name: "风速（m/s）",
          type: "value",
        },
        series: [
          {
            name: "风速(m/s)",
            data: seriesData,
            type: "line",
            color: "#6B9BFD",
          },
        ],
      };
    }
    option && lineChart.setOption(option);
  };
  //能见度情况
  const nengjianduFn = () => {
    nengjiandu({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200) {
        let xAxisData = [];
        let seriesData = [];
        res.data.forEach((item) => {
          xAxisData.push(item.sj);
          seriesData.push(item.njdValue);
        });
        initLineChart2(xAxisData,seriesData);
      }
    });
  };
  const initLineChart2 = (xAxisData,seriesData) => {
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart2"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("lineChart2"));

    let option;
    if(xAxisData.length === 0){
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    }else{
      option = {
        tooltip: {
          trigger: "axis",
          confine: true, //限制在图表区域内
        },
        grid: {
          top: "40px",
          left: "50px",
          right: "30px",
          bottom: "45px",
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            startValue: 0,
            endValue: 10,
            zoomLock: false,
          },
        ],
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: -30, //倾斜的程度
          },
        },
        yAxis: {
          name: "能见度（m）",
          type: "value",
        },
        series: [
          {
            name: "能见度(m)",
            data: seriesData,
            type: "line",
            color: "#6B9BFD",
          },
        ],
      };
    }
    option && lineChart.setOption(option);
  };
  //通航情况
  const count = ref("1");
  const countOptions = [
    { name: "上下行船舶统计", value: "1" },
    { name: "空重载船舶统计", value: "2" },
  ];
  const radio = ref("周");
  const shipllAnalysFn = () => {
    if(radio.value === "日"){
      shipllAnalys({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200){
          initFirstChart(res.data);
        }
      });
    }else if(radio.value === "周"){
      shipllAnalysWeek({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200){
          initFirstChart(res.data);
        }
      });
    }else if(radio.value === "月"){
      shipllAnalysMonth({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200){
          initFirstChart(res.data);
        }
      });
    }else if(radio.value === "年"){
      shipllAnalysYear({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200){
          initFirstChart(res.data);
        }
      });
    }
  };
  const initFirstChart = (data) => {
    let xAxisData = [];
    let seriesData1 = [];
    let seriesData2 = [];
       
    data.forEach((item) => {
      xAxisData.push(item.tgsj);
      if(count.value == 1){
        seriesData1.push(item.up);
        seriesData2.push(item.down);
      }else{
        seriesData1.push(item.zhongdai);
        seriesData2.push(item.kongzai);
      }
    });
    let chart = echarts.getInstanceByDom(document.getElementById("first-chart"));
    if(chart != null && chart != "" && chart != undefined){
      chart.dispose();
    }
    chart = echarts.init(document.getElementById('first-chart'));
    let option;
    if(xAxisData.length === 0){
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    }else{
      option = {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: "shadow",
          },
          confine: true, //限制在图表区域内
        },
        legend: {},
        grid: {
          top: "15%",
          left: "10%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            startValue: 0,
            endValue: 4,
            zoomLock: false,
          },
        ],
        xAxis: [
          {
            type: "category",
            name: "",
            data: xAxisData,
            axisTick: {
              alignWithLabel: true, //控制刻度线是否与刻度标签对齐
              show: false, //是否显示刻度线
            },
            axisLabel: {
              interval:0, 
            },
            axisPointer: {
              show: true,
              type: 'none',
              label: {
                show: false,
              },
            },  
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "船舶流量（艘）",
            nameGap: 15,
            axisLabel: {
              interval:0, 
            },
            splitLine: {
              show: true,
            } 
          },
        ],
        series: [
          {
            name: count.value == 1? "上行" : "重载",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            stack: "Ad",
            barWidth: '15%',
            color: "#0051FF",
            data: seriesData1,
          },
          {
            name: count.value == 1? "下行" : "空载",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            stack: "Ad",
            barWidth: '15%',
            color: "#66D88A",
            data: seriesData2,
          },        
        ],
      };
    }

    option && chart.setOption(option);
  };
  //筛选
  const isShowFilter = ref(false);
  const checkAll1 = ref(false);
  const isIndeterminate1 = ref(false);
  const checkedValues1 = ref([]);
  const options1 = ["一级","二级","三级"];
  const handleCheckAllChange1 = (val) => {
    checkedValues1.value = val ? options1 : [];
    isIndeterminate1.value = false;
    handleSure();
  };
  const handleCheckedChange1 = (value) => {
    const checkedCount = value.length;
    checkAll1.value = checkedCount === options1.length;
    isIndeterminate1.value = checkedCount > 0 && checkedCount < options1.length;
    handleSure();
  };

  const checkAll2 = ref(false);
  const isIndeterminate2 = ref(false);
  const checkedValues2 = ref([]);
  const options2 = ["四级","五级","六级","七级"];
  const handleCheckAllChange2 = (val) => {
    checkedValues2.value = val ? options2 : [];
    isIndeterminate2.value = false;
    handleSure();
  };
  const handleCheckedChange2 = (value) => {
    const checkedCount = value.length;
    checkAll2.value = checkedCount === options2.length;
    isIndeterminate2.value = checkedCount > 0 && checkedCount < options2.length;
    handleSure();
  };

  const nhdwhd = ref(false);

  const checkAll3 = ref(false);
  const isIndeterminate3 = ref(false);
  const checkedValues3 = ref([]);
  const options3 = ["达标","不达标"];
  const handleCheckAllChange3 = (val) => {
    checkedValues3.value = val ? options3 : [];
    isIndeterminate3.value = false;
    handleSure();
  };
  const handleCheckedChange3 = (value) => {
    const checkedCount = value.length;
    checkAll3.value = checkedCount === options3.length;
    isIndeterminate3.value = checkedCount > 0 && checkedCount < options3.length;
    handleSure();
  };

  const checkAll4 = ref(false);
  const isIndeterminate4 = ref(false);
  const checkedValues4 = ref([]);
  const options4 = ["近三年被撞桥梁","近一年被撞桥梁"];
  const handleCheckAllChange4 = (val) => {
    checkedValues4.value = val ? options4 : [];
    isIndeterminate4.value = false;
    handleSure();
  };
  const handleCheckedChange4 = (value) => {
    const checkedCount = value.length;
    checkAll4.value = checkedCount === options4.length;
    isIndeterminate4.value = checkedCount > 0 && checkedCount < options4.length;
    handleSure();
  };

  const handleSure = () => {   
    let arr = checkedValues1.value.concat(checkedValues2.value);
    let isDabiao = [];
    let isAccident = [];
    if(nhdwhd.value === true){
      arr.push("八级");
    };
    checkedValues3.value.forEach((item) => {
      if(item == "达标"){
        isDabiao.push(0);
      }else if(item == "不达标"){
        isDabiao.push(1);
      }
    });
    checkedValues4.value.forEach((item) => {
      if(item == "近三年被撞桥梁"){
        isAccident.push(3);
      }else if(item == "近一年被撞桥梁"){
        isAccident.push(1);
      }
    });
    OlArcRef.value.getPosInfoFn({
      level: arr.join(','),
      isDabiao: isDabiao.join(','),
      isAccident: isAccident.join(',')      
    });
  };

  //获取桥梁全景
  const haveLink = ref("");
  const bgModelFn = () => {
    bgModel({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.link){
        haveLink.value = res.data.link;
      }else{
        haveLink.value = "";
      }
    });
  };
  const goLink = () => {
    window.open(haveLink.value);
  };

  onMounted(() => {
    document.title = "水上桥区管控";
    bgListFn();
    baseInfoFn();
  });
</script>

<style lang="scss" scoped>
  @font-face{
    font-family: Din;
    src: url("../../assets/fonts/din.ttf");
  }
  @font-face{
    font-family: Tx;
    src: url("../../assets/fonts/tx.ttf");
  }
  .container{    
    width: 2560px;
    height: 1660px;
    box-sizing: content-box;
    .header{
      height: 40px;    
      display: flex;
      align-items: center;  
      justify-content: space-between; 
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
      border-radius: 4px;  
      margin: 16px 16px 0px 16px; 
      padding: 0 16px;
      .title{
        font-family: 'Tx';
        font-weight: 500;
        font-size: 18px;
        color: #262626;
      }
      .menu{
        display: flex;
        align-items: center;
        .item{
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          padding: 6px 18px;
          border-radius: 4px;
        }
        .active{
          color: #FFFFFF;
          background: #0051FF;
        }
      }
    }
    .main{
      box-sizing: content-box;
      height: 1604px;
      margin: 16px;      
      display: flex;
      .left-content{
        width: 614px;
        height: 1572px;        
        box-sizing: content-box;
        background: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
        border-radius: 0px 0px 4px 4px;
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .subtitle{
          height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          border-bottom: 1px solid #F0F0F0;
          .name{
            font-weight: 500;
            font-size: 16px;
            color: #262626;
          }
        }
        .image{
          height: 422px;
          box-sizing: content-box;
          margin: 8px 16px 16px 16px;         
          img{
            width: 100%;
            height: 100%;
          }
          .no-image{
            height: 242px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
              width: 88px;
              height: 88px;
            }
            .name{
              font-weight: 500;
              font-size: 16px;
              color: #262626;
              margin-top: 8px;
            }
          }
          .btn{
            text-align: center;
            font-weight: 400;
            font-size: 16px;
            padding: 4px 8px;
            border-radius: 4px;
            color: #FFFFFF;
            background: #0051FF;
            position: absolute;
            top: 0px;
            right: 0px;
          }
        }
        .info{
          height: 448px;
          margin: 10px 16px;
          .info-item{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
            padding: 24px 0;
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #595959;
            }
            .value{
              font-weight: 500;
              font-size: 16px;
              color: #262626;
            }
          }
        }
        .portrait{
          height: 440px;
          display: flex;
          align-items: center;
          background: #F8F9FB;
          margin: 8px 16px 16px 16px;
          .portrait-item{
            width: 33.33%;
            text-align: center;
            img{
              width: 56px;
              height: 52px;
            }
            .name{
              font-weight: 500;
              font-size: 16px;
              color: #262626; 
              margin-top: 9px;            
            }
          }
          .br1{
            border-right: 1px solid #D9D9D9;
          }
        }
      }
      .middle-content{
        width: 1268px;   
        height: 1572px;
        margin: 0 16px;
        box-sizing: content-box;
        position: relative;
        .choose{
          position: absolute;
          top: 16px;
          left: 16px;
        }
        .legend{
          width: 196px;
          height: 84px;
          background: rgba(5,48,68,0.8);
          border-radius: 0px 0px 0px 0px;
          border: 1px solid rgba(120,223,255,0.4);  
          position: absolute;
          top: 16px;
          right: 16px; 
          .legend-item{
            display: flex;        
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
            margin: 16px 0px 16px 16px;
            img{
              width: 20px;
              height: 20px;
              padding-right: 4px;                
            }
          }
        }
        .count{
          width: 196px;
          height: 84px;
          background: rgba(5,48,68,0.8);
          border-radius: 0px 0px 0px 0px;
          border: 1px solid rgba(120,223,255,0.4);  
          position: absolute;
          top: 110px;
          right: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          .count-item{
            color: #FFFFFF;
            .value{
              font-family: 'Din';
              font-size: 20px;
              font-weight: bold;
              margin-top: 4px;
            }
          }
        }
        .filter{
          width: 196px;
          position: absolute;
          top: 204px;
          right: 16px; 
          background: rgba(5,48,68,0.8);
          border: 1px solid rgba(120,223,255,0.4); 
          color: #FFFFFF;
          .filter-title{
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            background: #042336;
            border-bottom: 1px solid rgba(120,223,255,0.4);
            padding: 8px 0px 8px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
              padding-right: 16px;
            }
          }
          .filter-item{
            margin: 4px 0px 4px 16px;
          }
        }
      }
      .right-content{
        width: 614px;
        height: 1572px;     
        box-sizing: content-box; 
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .subtitle{
          height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          border-bottom: 1px solid #F0F0F0;
          font-weight: 500;
          font-size: 16px;
          .name{
            color: #262626;
            margin-right: 10px;
          }
          .active{
            border-bottom: 2px solid #0051FF;
          }
        }
        .first-part{
          height: 883px;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px;
          margin-bottom: 16px;
        }
        .hole-info{
          height: 242px;
          margin: 2px 16px 6px 16px;
          .hole-item{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
            padding: 18px 0;
            font-size: 16px;
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #595959;
            }
            .value{
              font-family: 'Din';
              font-weight: bold;
              font-size: 16px;
              color: #262626;
            }
          }
        }
        .warning{
          height: 113px;
          display: flex;
          align-items: center;
          background: #F8F9FB;
          margin: 8px 16px 16px 16px;
          .warning-item{
            width: 33.33%;
            text-align: center;           
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #595959;
              margin-bottom: 4px;
            }
            .value{
              font-family: 'Din';
              font-size: 20px;
              font-weight: bold;
              color: #F13939;
            }
          }
          .br1{
            border-right: 1px solid #D9D9D9;
          }
        }
        .water-situation{
          .radio-group{
            text-align: center;
            margin-top: 8px;
          }
          .count{
            display: flex;
            justify-content: space-between;
            margin: 8px 16px 4px 16px;
            .item{
              display: flex;
              align-items: center;
              .name{
                font-weight: 600;
                font-size: 16px;
                color: #262626;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 16px;
                color: #0051FF;
              }
              .update-time{
                font-weight: 400;
                font-size: 16px;
                color: #595959;
              }
            }
          }
          .info{
            height: 257px;
            background: #F8F9FB;
            margin: 0 16px;
            display: flex;
            .info-item{
              width: 50%;
              margin: 28px 0px 8px 16px;
              .value{
                display: flex;
                align-items: center;
                font-family: 'Din';
                font-weight: bold;
                font-size: 20px;
                color: #0051FF;
                img{
                  width: 20px;
                  height: 20px;
                  padding-right: 4px;
                }
              }
              .name{
                font-weight: 500;
                font-size: 16px;
                color: #262626;
                margin-top: 4px;
              }
              .time{
                display: flex;
                align-items: center;
                margin-top: 8px;
                font-weight: 400;
                font-size: 16px;
                color: #595959;
                img{
                  padding-right: 4px;
                }
              }
              .tips{
                font-weight: 400;
                font-size: 16px;
                color: #8C8C8C;
              }
            }
          }
        }
        .shipping{
          height: 577px;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px;
          .radio-group{
            text-align: center;
            margin-top: 8px;
          }
        }
      }
    }
  }
  :deep(.el-checkbox){
    font-weight: 400;
    color: #FFFFFF;
  }
  :deep(.el-checkbox__inner){
    background-color: #D8D8D8;
  }
  :deep(.el-checkbox__input.is-checked+.el-checkbox__label){
    color: #78DFFF;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
    background-color: #78DFFF;
    border-color: #78DFFF;
  }
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner){
    background-color: #78DFFF;
    border-color: #78DFFF;
  }
  :deep(.el-checkbox__inner::after){    
    box-sizing: content-box;
    content: "";
    border: 1px solid black;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before){
    content: "";
    position: absolute;
    display: block;
    background-color: black;
    height: 2px;
    transform: scale(.5);
    left: 0;
    right: 0;
    top: 5px;
  }
</style>